<!DOCTYPE html>
<html lang="en">
<!--头部信息-->
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <link rel="stylesheet" href="../../../lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="../../../css/public.css" media="all">

    <script src="../../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>

    <style>
        body {
            background-color: #ffffff;
        }
    </style>

</head>
<!--死薄编辑-->
<body>
<form id="edit" action="">
    <div class="layui-form layuimini-form">


        <!--编号-->
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">ID：</label>
            <div class="layui-input-block" id="dieId" style="width: 80%">
                <label name="dieId" class="layui-form-label-col "></label>
            </div>
        </div>


        <!--姓名-->
        <div class="layui-form-item">
            <label class="layui-form-label">姓名：</label>
            <div class="layui-input-block" style="width: 80%">
                <input type="text" name="username" id="username" lay-verify="required" lay-reqtext="姓名不能为空" placeholder="请输入姓名"
                       value="" class="layui-input">
            </div>
        </div>


        <!--死亡寿命-->
        <div class="layui-form-item">
            <label class="layui-form-label">死亡寿命：</label>
            <div class="layui-input-block" id="dieAge" style="width: 80%">
                <label name="dieAge" class="layui-form-label-col "></label>
            </div>
        </div>


        <!--死亡原因-->
        <div class="layui-form-item">
            <label class="layui-form-label ">死亡原因：</label>
            <div class="layui-input-block" style="width: 80%">
                <select name="dieWhy" id="dieWhy">
                    <option value="" disabled="disabled">请选择</option>
                </select>
            </div>
        </div>


        <!--类别-->
        <div class="layui-form-item">
            <label class="layui-form-label ">类别：</label>
            <div class="layui-input-block" style="width: 80%">
                <select name="dieType" id="dieType">
                    <option value="" disabled="disabled">请选择</option>
                </select>
            </div>
        </div>


        <!--最近编辑时间-->
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">最后编辑时间：</label>
            <div class="layui-input-block" id="dieLassTime" style="width: 80%">
                <label name="dieLassTime" class="layui-form-label-col"></label>
            </div>
        </div>


        <!--保存按钮-->
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认</button>
                <button id="none" class="layui-btn layui-btn-primary ">返回</button>
            </div>
        </div>


    </div>
</form>


<!--隐藏域-->
<div style="display: none">
    <input type="text" value="" id="dieTypes">
    <input type="text" value="" id="dieWhys">
</div>


<script>
    layui.use(['form', 'layer', 'jquery'], function () {
        var form = layui.form,
            layer = layui.layer,
            $ = layui.jquery;


        getTypeList();
        getDitWhy();

        /*返回事件*/
        $("#none").click(function () {
            parent.layer.close(parent.layer.getFrameIndex(window.name));
        })

        /*初始化【类型】下拉列表*/
        function getTypeList() {
            $.ajax({
                type: "GET",
                url: "/getTypeList",
                dataType: "json",
                success: function (data) {
                    for (var i = 0; i < data.length; i++) {
                        $("#dieType").append("<option value=\"" + data[i].typeId + "\">" + data[i].typeName +
                            "</option>");
                        $('#dieType').val($("#dieTypes").val());
                    }
                    layui.form.render("select");
                }
            });
        }

        /*初始化【死亡类型】下拉列表*/
        function getDitWhy() {
            $.ajax({
                type: "GET",
                url: "/getDieWhyList",
                dataType: "json",
                success: function (data) {
                    for (var i = 0; i < data.length; i++) {
                        $("#dieWhy").append("<option value=\"" + data[i].id + "\">" + data[i].name +
                            "</option>");
                        $('#dieWhy').val($("#dieWhys").val());
                    }
                    layui.form.render("select");
                }
            });
        }

        /*保存事件*/
        form.on('submit(saveBtn)', function (data) {
            if ($('#dieWhy').val() === '' || $('#dieWhy').val() === null) {
                layer.msg("未选择死亡原因，请重试！", {icon: 2, time: 1500});
                return false;
            }
            if ($('#dieType').val() === '' || $('#dieType').val() === null) {
                layer.msg("未选择死亡类型，请重试！", {icon: 2, time: 1500});
                return false;
            }
            //数据封装
            var updateInfo = {
                dieId: $('#dieId label').text(),
                username: $('#username').val().trim(),
                dieWhy: $('#dieWhy').val(),
                dieType: $('#dieType').val()
            };
            layer.confirm("确认修改信息吗？", {icon: 3}, function (index) {
                /*发送修改请求*/
                $.ajax({
                    type: 'PUT',
                    dataType: 'text',
                    url: '/diebookModify',
                    data: {updateInfo: JSON.stringify(updateInfo)},
                    error: function () {
                        layer.alert("系统错误！");
                    },
                    success: function (result) {
                        if (result === 'success') {
                            layer.alert('修改成功！',
                                {
                                    title: '成功',
                                    skin: 'layui-layer-molv',
                                    btn: ['返回'],
                                    anim: 1,
                                    icon: 6,
                                    yes: function () {
                                        parent.layui.table.reload('testId', {
                                            page: {
                                                curr: 1
                                            },
                                        });
                                        layer.close(index);
                                        parent.layer.close(parent.layer.getFrameIndex(window.name));
                                    }
                                });
                        } else {
                            layer.alert('修改失败，请重试？',
                                {
                                    title: '错误',
                                    skin: 'layui-layer-molv',
                                    btn: ['重试', '退出'],
                                    anim: 1,
                                    icon: 5,
                                    yes: function (index) {
                                        layer.close(index);
                                    },
                                    btn2: function () {
                                        layer.close(index);
                                        parent.layer.close(parent.layer.getFrameIndex(window.name));
                                    }
                                });
                        }
                    }
                });
            });
            return false;
        });
    });
</script>
</body>
</html>